<template>
  <div>
    <!-- 添加或修改就诊(门诊)信息(一个病人一个病历号，多次就诊，多次就诊信息)对话框 -->
    <el-row>
      <!-- 添加或修改就诊(门诊)信息(一个病人一个病历号，多次就诊，多次就诊信息)对话框 -->
      <el-row>
        <el-col :span="22" :push="2">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row v-show="false">
              <el-col :span="7">
                <el-form-item label="患者id" prop="patientId">
                  <el-input v-model="form.pmsPatient.id" placeholder="患者id"/>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="看诊医生id" prop="staffId">
                  <el-input v-model="form.staffId" placeholder="看诊医生id"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="app-padding" :gutter="20">
              <el-col :span="7">
                <el-form-item label="身份证" prop="identificationNo">
                  <el-input v-model="form.pmsPatient.identificationNo" placeholder="身份证号"/>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="form.pmsPatient.name" placeholder="姓名"/>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="出生日期" prop="dateOfBirth">
                  <el-date-picker
                    v-model="form.pmsPatient.dateOfBirth"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>


            </el-row>
            <el-row class="app-padding" :gutter="20">
              <el-col :span="7">
                <el-form-item label="性别" prop="gender">
                  <el-select v-model="form.pmsPatient.gender" placeholder="性别">
                    <el-option
                      v-for="item in genderOptions"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="家庭住址" prop="homeAddress">
                  <el-input v-model="form.pmsPatient.homeAddress" placeholder="家庭住址"/>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="联系方式" prop="phoneNo">
                  <el-input v-model="form.pmsPatient.phoneNo" placeholder="联系方式"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="app-padding" :gutter="20">
              <el-col :span="7">
                <el-form-item label="挂号科室" prop="deptId">
                  <el-select v-model="form.deptId" filterable placeholder="挂号科室">
                    <el-option
                      v-for="item in deptOptions"
                      :key="item.deptId"
                      :label="item.deptName"
                      :value="item.deptId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="挂号级别" prop="registrationRankId">
                  <el-select v-model="form.registrationRankId" placeholder="挂号级别">
                    <el-option
                      v-for="item in rankOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="挂号日期" prop="attendanceDate">
                  <el-date-picker
                    v-model="form.attendanceDate"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>


            </el-row>
            <el-row class="app-padding" :gutter="20">
              <el-col :span="7">
                <el-form-item label="午别" prop="noon">
                  <el-select :disabled="disabledFlag" v-model="form.noon" placeholder="午别 默认下午">
                    <el-option
                      v-for="item in noonOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="看诊医生" prop="skdId">
                  <el-select :disabled="disabledFlag" ref="skdId" clearable  v-model="form.skdId" placeholder="看诊医生">
                    <el-option
                      v-for="item in staffOptions"
                      :key="item.skdId"
                      :label="item.name"
                      :value="item.skdId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="应收金额" prop="price">
                  <el-input v-model="form.price" :disabled="true" placeholder="应收金额"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="app-padding" :gutter="20">
              <el-col :span="7">
                <el-form-item label="支付方式" prop="catId">
                  <el-select v-model="form.catId" placeholder="支付方式">
                    <el-option
                      v-for="item in settlementCatOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="病历本" prop="needBook">
                  <el-radio-group v-model="form.needBook">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="2">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
      <el-row style="float: right;">
        <el-button type="primary" @click="submitForm">挂号打印&发票</el-button>
      </el-row>
    </el-row>
    <el-divider></el-divider>
  </div>
</template>
<script>
  import {handleRegistration} from "@/api/dms/registration";
  import ScrollPane from "../../../layout/components/TagsView/ScrollPane";
  import Icons from "../../components/icons/index";
  // 科室
  import {listDept} from "@/api/system/dept";
  // 性别
  import {listData} from "@/api/system/dict/data";
  // 挂号级别
  import {listRegistration_rank} from "@/api/sms/registration_rank";
  // 结算类别
  import {listCat} from "@/api/bms/cat";
  // 员工
  import {listStaffBySkd} from "@/api/sms/staff";
  export default {
    name: "addRegistration",
    components: {Icons, ScrollPane},
    props:['patientObject','invoiceNo'],
    data() {
      return {
        // select 列表禁用
        disabledFlag: true,
        // 表单参数
        form: {
          pmsPatient:{
            id:null,
            identificationNo:null,
            name:null,
            dateOfBirth:null,
            gender:null,
            homeAddress:null,
            phoneNo:null,
          },
          needBook: "1",
          catId:null
        },
        // 表单校验
        rules: {},
        // 性别列表
        genderOptions: [],
        // 午别列表
        noonOptions: [{
          value: '0',
          label: '上午'
        }, {
          value: '1',
          label: '下午'
        }],
        // 科室列表
        deptOptions: [],
        // 挂号级别列表
        rankOptions: [],
        // 结算类别列表
        settlementCatOptions: [],
        // 员工(看诊医生)列表
        staffOptions: [],
      };
    },
    created() {
      // 性别列表
      this.getGenderList({dictType: "sys_user_sex"});
      // 科室列表
      this.getDeptList();
      // 挂号级别列表
      this.getRankList();
      // 结算类别
      this.getCatList();
    },
    computed: {
      valueChange() {
        const {attendanceDate, deptId, registrationRankId, noon} = this.form
        return {
          attendanceDate, deptId, registrationRankId, noon
        }
      }
    },
    watch: {
      // 监听看诊医生 变化
      'form.skdId'(val){
        // 应收金额 赋值
        if(val){
          this.form.staffId = this.staffOptions.find((staff) => (staff.skdId === val)).id;
          return;
        }
        this.form.staffId= null;
      },
      // 监听挂号科室、级别、日期是否改变
      valueChange(val) {
        if (val.attendanceDate != null && val.deptId != null && val.registrationRankId != null) {
          // 等于 null 则为 下午
          val.noon = val.noon == null ? "1" : val.noon;
          // 取消禁用
          this.disabledFlag = false;
          // 医生查询
          this.getStaffList(val);
          // 应收金额 赋值
          this.form.price = this.rankOptions.find((rank) => (rank.id === val.registrationRankId)).price;
        } else {
          this.disabledFlag = true;
        }
      },
      // 患者获取
      patientObject(val){
          this.form.pmsPatient=val;
          this.form.gender = val.gender.toString();
          this.form.patientId = val.id;
      },
      // 发票号获取
      invoiceNo(val){
        this.form.invoiceNo =val;
      }
    },
    methods: {
      // 表单重置
      reset() {
        this.form = {
          /*id: null,*/
          createTime: null,
          endAttendance: null,
          status: 0,
          skdId: null,
          deptId: null,
          attendanceDate: null,
          patientAgeStr: null,
          registrationRankId: null,
          noon: null,
          staffId: null,
          price: null,
          catId: null,
          needBook: null,
          invoiceNo:null,
          pmsPatient:{
            id:null,
            identificationNo:null,
            name:null,
            dateOfBirth:null,
            gender:null,
            homeAddress:null,
            phoneNo:null,
          }
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            handleRegistration(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("挂号成功");
                // 表单刷新
                this.reset();
                this.$emit('addSuccessBack')
              }
            });
          }
        });
      },
      /**性别格式转换*/
      genderFormat(row, column, cellValue) {
        if (cellValue === 0) {
          return "男"
        } else if (cellValue === 1) {
          return "女"
        }
      },
      /** 性别列表获取 */
      getGenderList(params) {
        listData(params).then(response => {
          this.genderOptions = response.rows;
        });
      },
      /** 科室列表获取 */
      getDeptList() {
        listDept().then(response => {
          this.deptOptions = response.data;
        });
      },
      /**挂号级别列表获取 */
      getRankList() {
        listRegistration_rank().then(response => {
          this.rankOptions = response.rows;
        });
      },
      /** 结算类别列表获取 */
      getCatList() {
        listCat().then(response => {
          this.settlementCatOptions = response.rows;
        });
      },
      /** 看诊医生*/
      getStaffList(params) {
        this.$set(this.form,'skdId','')
        this.staffOptions=[];
        listStaffBySkd(params).then(response => {
            this.staffOptions = response.rows;
        });
      },
    }
  };
</script>

<style scoped>
  .app-padding {
    padding: 10px;
  }
</style>
